import { useEffect, useState, useRef, useCallback, memo } from 'react'
import produce from 'immer'
import { CSSTransition } from 'react-transition-group'
import { getGoods } from './../../api'
import GoodsNav from './../goods-nav'
import GoodsPanel from './../goods-panel'
import ShopingCartSticky from './../shoping-cart-sticky'
import ModelLayer from './../model-layer'
import ShoppingCartList from './../shopping-cart-list'
import FoodPortal from './../food'
import './index.styl'

const Goods = props => {
  const seller = props.seller

  const [goodsCategory, setGoodsCategory] = useState([])
  const [selectFoods, setSelectFoods] = useState([])
  const [activeNavIndex, setActiveNavIndex] = useState(0)
  const [showPopupModel, setShowPopupModel] = useState(false)
  const [showTransition, setShowTransition] = useState(false)
  const [showBallFlying, setShowBallFlying] = useState(null)
  const [showFoodDetail, setShowFoodDetail] = useState(false)
  const [food, setFood] = useState(null)
  const [isJumpScroll, setIsJumpScroll] = useState(false)

  const goodsNavRef = useRef(null)
  const goodsPanelRef = useRef(null)

  useEffect(() => {
    // getGoods().then(res => {
    //   setGoodsCategory(res)
    // })
    const goodsCategoryData =  [
      {
        "name": "热销榜",
        "type": -1,
        "foods": [
          {
            "name": "皮蛋瘦肉粥",
            "price": 10,
            "oldPrice": "",
            "description": "咸粥",
            "sellCount": 229,
            "rating": 100,
            "info": "一碗皮蛋瘦肉粥，总是我到粥店时的不二之选。香浓软滑，饱腹暖心，皮蛋的Q弹与瘦肉的滑嫩伴着粥香溢于满口，让人喝这样的一碗粥也觉得心满意足",
            "ratings": [
              {
                "username": "3******c",
                "rateTime": 1469281964000,
                "rateType": 0,
                "text": "很喜欢的粥",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              },
              {
                "username": "2******3",
                "rateTime": 1469271264000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              },
              {
                "username": "3******b",
                "rateTime": 1469261964000,
                "rateType": 1,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              }
            ],
            "icon": "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/114/h/114",
            "image": "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/750/h/750"
          },
          {
            "name": "扁豆焖面",
            "price": 14,
            "oldPrice": "",
            "description": "",
            "sellCount": 188,
            "rating": 96,
            "ratings": [
              {
                "username": "3******c",
                "rateTime": 1469281964000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              },
              {
                "username": "2******3",
                "rateTime": 1469271264000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              },
              {
                "username": "3******b",
                "rateTime": 1469261964000,
                "rateType": 1,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              }
            ],
            "info": "",
            "icon": "http://fuss10.elemecdn.com/c/6b/29e3d29b0db63d36f7c500bca31d8jpeg.jpeg?imageView2/1/w/114/h/114",
            "image": "http://fuss10.elemecdn.com/c/6b/29e3d29b0db63d36f7c500bca31d8jpeg.jpeg?imageView2/1/w/750/h/750"
          },
          {
            "name": "葱花饼",
            "price": 10,
            "oldPrice": "",
            "description": "",
            "sellCount": 124,
            "rating": 85,
            "info": "",
            "ratings": [
              {
                "username": "3******c",
                "rateTime": 1469281964000,
                "rateType": 1,
                "text": "没啥味道",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              },
              {
                "username": "2******3",
                "rateTime": 1469271264000,
                "rateType": 1,
                "text": "很一般啊",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              },
              {
                "username": "3******b",
                "rateTime": 1469261964000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              }
            ],
            "icon": "http://fuss10.elemecdn.com/f/28/a51e7b18751bcdf871648a23fd3b4jpeg.jpeg?imageView2/1/w/114/h/114",
            "image": "http://fuss10.elemecdn.com/f/28/a51e7b18751bcdf871648a23fd3b4jpeg.jpeg?imageView2/1/w/750/h/750"
          },
          {
            "name": "牛肉馅饼",
            "price": 14,
            "oldPrice": "",
            "description": "",
            "sellCount": 114,
            "rating": 91,
            "info": "",
            "ratings": [
              {
                "username": "3******c",
                "rateTime": 1469281964000,
                "rateType": 1,
                "text": "难吃不推荐",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              },
              {
                "username": "2******3",
                "rateTime": 1469271264000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              },
              {
                "username": "3******b",
                "rateTime": 1469261964000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              }
            ],
            "icon": "http://fuss10.elemecdn.com/d/b9/bcab0e8ad97758e65ae5a62b2664ejpeg.jpeg?imageView2/1/w/114/h/114",
            "image": "http://fuss10.elemecdn.com/d/b9/bcab0e8ad97758e65ae5a62b2664ejpeg.jpeg?imageView2/1/w/750/h/750"
          },
          {
            "name": "招牌猪肉白菜锅贴/10个",
            "price": 17,
            "oldPrice": "",
            "description": "",
            "sellCount": 101,
            "rating": 78,
            "info": "",
            "ratings": [
              {
                "username": "3******c",
                "rateTime": 1469281964000,
                "rateType": 1,
                "text": "不脆,不好吃",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              },
              {
                "username": "2******3",
                "rateTime": 1469271264000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              },
              {
                "username": "3******b",
                "rateTime": 1469261964000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              }
            ],
            "icon": "http://fuss10.elemecdn.com/7/72/9a580c1462ca1e4d3c07e112bc035jpeg.jpeg?imageView2/1/w/114/h/114",
            "image": "http://fuss10.elemecdn.com/7/72/9a580c1462ca1e4d3c07e112bc035jpeg.jpeg?imageView2/1/w/750/h/750"
          },
          {
            "name": "南瓜粥",
            "price": 9,
            "oldPrice": "",
            "description": "甜粥",
            "sellCount": 91,
            "rating": 100,
            "ratings": [
              {
                "username": "3******c",
                "rateTime": 1469281964000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              },
              {
                "username": "2******3",
                "rateTime": 1469271264000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              },
              {
                "username": "3******b",
                "rateTime": 1469261964000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              }
            ],
            "icon": "http://fuss10.elemecdn.com/8/a6/453f65f16b1391942af11511b7a90jpeg.jpeg?imageView2/1/w/114/h/114",
            "image": "http://fuss10.elemecdn.com/8/a6/453f65f16b1391942af11511b7a90jpeg.jpeg?imageView2/1/w/750/h/750"
          },
          {
            "name": "红豆薏米美肤粥",
            "price": 12,
            "oldPrice": "",
            "description": "甜粥",
            "sellCount": 86,
            "rating": 100,
            "info": "",
            "ratings": [
              {
                "username": "3******c",
                "rateTime": 1469281964000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              },
              {
                "username": "2******3",
                "rateTime": 1469271264000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              },
              {
                "username": "3******b",
                "rateTime": 1469261964000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              }
            ],
            "icon": "http://fuss10.elemecdn.com/d/22/260bd78ee6ac6051136c5447fe307jpeg.jpeg?imageView2/1/w/114/h/114",
            "image": "http://fuss10.elemecdn.com/d/22/260bd78ee6ac6051136c5447fe307jpeg.jpeg?imageView2/1/w/750/h/750"
          },
          {
            "name": "八宝酱菜",
            "price": 4,
            "oldPrice": "",
            "description": "",
            "sellCount": 84,
            "rating": 100,
            "info": "",
            "ratings": [
              {
                "username": "3******c",
                "rateTime": 1469281964000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              },
              {
                "username": "2******3",
                "rateTime": 1469271264000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              },
              {
                "username": "3******b",
                "rateTime": 1469261964000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              }
            ],
            "icon": "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/114/h/114",
            "image": "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/750/h/750"
          },
          {
            "name": "红枣山药糙米粥",
            "price": 10,
            "oldPrice": "",
            "description": "",
            "sellCount": 81,
            "rating": 91,
            "info": "",
            "ratings": [
              {
                "username": "3******c",
                "rateTime": 1469281964000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              },
              {
                "username": "2******3",
                "rateTime": 1469271264000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              },
              {
                "username": "3******b",
                "rateTime": 1469261964000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              }
            ],
            "icon": "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/114/h/114",
            "image": "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/750/h/750"
          },
          {
            "name": "糊塌子",
            "price": 10,
            "oldPrice": "",
            "description": "",
            "sellCount": 80,
            "rating": 93,
            "info": "",
            "ratings": [
              {
                "username": "3******c",
                "rateTime": 1469281964000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              },
              {
                "username": "2******3",
                "rateTime": 1469271264000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              },
              {
                "username": "3******b",
                "rateTime": 1469261964000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              }
            ],
            "icon": "http://fuss10.elemecdn.com/0/05/097a2a59fd2a2292d08067e16380cjpeg.jpeg?imageView2/1/w/114/h/114",
            "image": "http://fuss10.elemecdn.com/0/05/097a2a59fd2a2292d08067e16380cjpeg.jpeg?imageView2/1/w/750/h/750"
          }
        ]
      },
      {
        "name": "单人精彩套餐",
        "type": 2,
        "foods": [
          {
            "name": "红枣山药粥套餐",
            "price": 29,
            "oldPrice": 36,
            "description": "红枣山药糙米粥,素材包,爽口莴笋丝,四川泡菜或八宝酱菜,配菜可备注",
            "sellCount": 17,
            "rating": 100,
            "info": "",
            "ratings": [
              {
                "username": "2******3",
                "rateTime": 1469271264000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              }
            ],
            "icon": "http://fuss10.elemecdn.com/6/72/cb844f0bb60c502c6d5c05e0bddf5jpeg.jpeg?imageView2/1/w/114/h/114",
            "image": "http://fuss10.elemecdn.com/6/72/cb844f0bb60c502c6d5c05e0bddf5jpeg.jpeg?imageView2/1/w/750/h/750"
          }
        ]
      },
      {
        "name": "冰爽饮品限时特惠",
        "type": 1,
        "foods": [
          {
            "name": "VC无限橙果汁",
            "price": 8,
            "oldPrice": 10,
            "description": "",
            "sellCount": 15,
            "rating": 100,
            "info": "",
            "ratings": [
              {
                "username": "3******c",
                "rateTime": 1469281964000,
                "rateType": 0,
                "text": "还可以",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              },
              {
                "username": "2******3",
                "rateTime": 1469271264000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              }
            ],
            "icon": "http://fuss10.elemecdn.com/e/c6/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/114/h/114",
            "image": "http://fuss10.elemecdn.com/e/c6/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/750/h/750"
          }
        ]
      },
      {
        "name": "精选热菜",
        "type": -1,
        "foods": [
          {
            "name": "娃娃菜炖豆腐",
            "price": 17,
            "oldPrice": "",
            "description": "",
            "sellCount": 43,
            "rating": 92,
            "info": "",
            "ratings": [
              {
                "username": "3******c",
                "rateTime": 1469281964000,
                "rateType": 0,
                "text": "菜量还可以,味道还可以",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              },
              {
                "username": "2******3",
                "rateTime": 1469271264000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              }
            ],
            "icon": "http://fuss10.elemecdn.com/d/2d/b1eb45b305635d9dd04ddf157165fjpeg.jpeg?imageView2/1/w/114/h/114",
            "image": "http://fuss10.elemecdn.com/d/2d/b1eb45b305635d9dd04ddf157165fjpeg.jpeg?imageView2/1/w/750/h/750"
          },
          {
            "name": "手撕包菜",
            "price": 16,
            "oldPrice": "",
            "description": "",
            "sellCount": 29,
            "rating": 100,
            "info": "",
            "ratings": [
              {
                "username": "3******c",
                "rateTime": 1469281964000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              },
              {
                "username": "2******3",
                "rateTime": 1469271264000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              }
            ],
            "icon": "http://fuss10.elemecdn.com/9/c6/f3bc84468820121112e79583c24efjpeg.jpeg?imageView2/1/w/114/h/114",
            "image": "http://fuss10.elemecdn.com/9/c6/f3bc84468820121112e79583c24efjpeg.jpeg?imageView2/1/w/750/h/750"
          },
          {
            "name": "香酥黄金鱼/3条",
            "price": 11,
            "oldPrice": "",
            "description": "",
            "sellCount": 15,
            "rating": 100,
            "info": "",
            "ratings": [
              {
                "username": "3******c",
                "rateTime": 1469281964000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              },
              {
                "username": "2******3",
                "rateTime": 1469271264000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              }
            ],
            "icon": "http://fuss10.elemecdn.com/4/e7/8277a6a2ea0a2e97710290499fc41jpeg.jpeg?imageView2/1/w/114/h/114",
            "image": "http://fuss10.elemecdn.com/4/e7/8277a6a2ea0a2e97710290499fc41jpeg.jpeg?imageView2/1/w/750/h/750"
          }
        ]
      },
      {
        "name": "爽口凉菜",
        "type": -1,
        "foods": [
          {
            "name": "八宝酱菜",
            "price": 4,
            "oldPrice": "",
            "description": "",
            "sellCount": 84,
            "rating": 100,
            "info": "",
            "ratings": [
              {
                "username": "3******c",
                "rateTime": 1469281964000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              },
              {
                "username": "2******3",
                "rateTime": 1469271264000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              },
              {
                "username": "3******b",
                "rateTime": 1469261964000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              }
            ],
            "icon": "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/114/h/114",
            "image": "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/750/h/750"
          },
          {
            "name": "拍黄瓜",
            "price": 9,
            "oldPrice": "",
            "description": "",
            "sellCount": 28,
            "rating": 100,
            "info": "",
            "ratings": [
              {
                "username": "3******c",
                "rateTime": 1469281964000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              },
              {
                "username": "2******3",
                "rateTime": 1469271264000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              },
              {
                "username": "3******b",
                "rateTime": 1469261964000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              }
            ],
            "icon": "http://fuss10.elemecdn.com/6/54/f654985b4e185f06eb07f8fa2b2e8jpeg.jpeg?imageView2/1/w/114/h/114",
            "image": "http://fuss10.elemecdn.com/6/54/f654985b4e185f06eb07f8fa2b2e8jpeg.jpeg?imageView2/1/w/750/h/750"
          }
        ]
      },
      {
        "name": "精选套餐",
        "type": -1,
        "foods": [
          {
            "name": "红豆薏米粥套餐",
            "price": 37,
            "oldPrice": "",
            "description": "红豆薏米粥,三鲜干蒸烧卖,拍黄瓜",
            "sellCount": 3,
            "rating": 100,
            "info": "",
            "ratings": [
              {
                "username": "2******3",
                "rateTime": 1469271264000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              }
            ],
            "icon": "http://fuss10.elemecdn.com/f/49/27f26ed00c025b2200a9ccbb7e67ejpeg.jpeg?imageView2/1/w/114/h/114",
            "image": "http://fuss10.elemecdn.com/f/49/27f26ed00c025b2200a9ccbb7e67ejpeg.jpeg?imageView2/1/w/750/h/750"
          },
          {
            "name": "皮蛋瘦肉粥套餐",
            "price": 31,
            "oldPrice": "",
            "description": "",
            "sellCount": 12,
            "rating": 100,
            "info": "",
            "ratings": [
              {
                "username": "2******3",
                "rateTime": 1469271264000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              }
            ],
            "icon": "http://fuss10.elemecdn.com/8/96/f444a8087f0e940ef264617f9d98ajpeg.jpeg?imageView2/1/w/114/h/114",
            "image": "http://fuss10.elemecdn.com/8/96/f444a8087f0e940ef264617f9d98ajpeg.jpeg?imageView2/1/w/750/h/750"
          }
        ]
      },
      {
        "name": "果拼果汁",
        "type": -1,
        "foods": [
          {
            "name": "蜜瓜圣女萝莉杯",
            "price": 6,
            "oldPrice": "",
            "description": "",
            "sellCount": 1,
            "rating": "",
            "info": "",
            "ratings": [],
            "icon": "http://fuss10.elemecdn.com/b/5f/b3b04c259d5ec9fa52e1856ee50dajpeg.jpeg?imageView2/1/w/114/h/114",
            "image": "http://fuss10.elemecdn.com/b/5f/b3b04c259d5ec9fa52e1856ee50dajpeg.jpeg?imageView2/1/w/750/h/750"
          },
          {
            "name": "加多宝",
            "price": 6,
            "oldPrice": "",
            "description": "",
            "sellCount": 7,
            "rating": 100,
            "info": "",
            "ratings": [
              {
                "username": "3******c",
                "rateTime": 1469281964000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              },
              {
                "username": "2******3",
                "rateTime": 1469271264000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              },
              {
                "username": "3******b",
                "rateTime": 1469261964000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              }
            ],
            "icon": "http://fuss10.elemecdn.com/b/9f/5e6c99c593cf65229225c5661bcdejpeg.jpeg?imageView2/1/w/114/h/114",
            "image": "http://fuss10.elemecdn.com/b/9f/5e6c99c593cf65229225c5661bcdejpeg.jpeg?imageView2/1/w/750/h/750"
          },
          {
            "name": "VC无限橙果汁",
            "price": 8,
            "oldPrice": 10,
            "description": "",
            "sellCount": 15,
            "rating": 100,
            "info": "",
            "ratings": [
              {
                "username": "3******c",
                "rateTime": 1469281964000,
                "rateType": 0,
                "text": "还可以",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              },
              {
                "username": "2******3",
                "rateTime": 1469271264000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              }
            ],
            "icon": "http://fuss10.elemecdn.com/e/c6/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/114/h/114",
            "image": "http://fuss10.elemecdn.com/e/c6/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/750/h/750"
          }
        ]
      },
      {
        "name": "小吃主食",
        "type": -1,
        "foods": [
          {
            "name": "扁豆焖面",
            "price": 14,
            "oldPrice": "",
            "description": "",
            "sellCount": 188,
            "rating": 96,
            "info": "",
            "ratings": [
              {
                "username": "3******c",
                "rateTime": 1469281964000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              },
              {
                "username": "2******3",
                "rateTime": 1469271264000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              },
              {
                "username": "3******b",
                "rateTime": 1469261964000,
                "rateType": 1,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              }
            ],
            "icon": "http://fuss10.elemecdn.com/c/6b/29e3d29b0db63d36f7c500bca31d8jpeg.jpeg?imageView2/1/w/114/h/114",
            "image": "http://fuss10.elemecdn.com/c/6b/29e3d29b0db63d36f7c500bca31d8jpeg.jpeg?imageView2/1/w/750/h/750"
          },
          {
            "name": "葱花饼",
            "price": 10,
            "oldPrice": "",
            "description": "",
            "sellCount": 124,
            "rating": 85,
            "info": "",
            "ratings": [
              {
                "username": "3******c",
                "rateTime": 1469281964000,
                "rateType": 1,
                "text": "没啥味道",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              },
              {
                "username": "2******3",
                "rateTime": 1469271264000,
                "rateType": 1,
                "text": "很一般啊",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              },
              {
                "username": "3******b",
                "rateTime": 1469261964000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              }
            ],
            "icon": "http://fuss10.elemecdn.com/f/28/a51e7b18751bcdf871648a23fd3b4jpeg.jpeg?imageView2/1/w/114/h/114",
            "image": "http://fuss10.elemecdn.com/f/28/a51e7b18751bcdf871648a23fd3b4jpeg.jpeg?imageView2/1/w/750/h/750"
          },
          {
            "name": "牛肉馅饼",
            "price": 14,
            "oldPrice": "",
            "description": "",
            "sellCount": 114,
            "rating": 91,
            "info": "",
            "ratings": [
              {
                "username": "3******c",
                "rateTime": 1469281964000,
                "rateType": 1,
                "text": "难吃不推荐",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              },
              {
                "username": "2******3",
                "rateTime": 1469271264000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              },
              {
                "username": "3******b",
                "rateTime": 1469261964000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              }
            ],
            "icon": "http://fuss10.elemecdn.com/d/b9/bcab0e8ad97758e65ae5a62b2664ejpeg.jpeg?imageView2/1/w/114/h/114",
            "image": "http://fuss10.elemecdn.com/d/b9/bcab0e8ad97758e65ae5a62b2664ejpeg.jpeg?imageView2/1/w/750/h/750"
          },
          {
            "name": "招牌猪肉白菜锅贴/10个",
            "price": 17,
            "oldPrice": "",
            "description": "",
            "sellCount": 101,
            "rating": 78,
            "info": "",
            "ratings": [
              {
                "username": "3******c",
                "rateTime": 1469281964000,
                "rateType": 1,
                "text": "不脆,不好吃",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              },
              {
                "username": "2******3",
                "rateTime": 1469271264000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              },
              {
                "username": "3******b",
                "rateTime": 1469261964000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              }
            ],
            "icon": "http://fuss10.elemecdn.com/7/72/9a580c1462ca1e4d3c07e112bc035jpeg.jpeg?imageView2/1/w/114/h/114",
            "image": "http://fuss10.elemecdn.com/7/72/9a580c1462ca1e4d3c07e112bc035jpeg.jpeg?imageView2/1/w/750/h/750"
          },
          {
            "name": "糊塌子",
            "price": 10,
            "oldPrice": "",
            "description": "",
            "sellCount": 80,
            "rating": 93,
            "info": "",
            "ratings": [
              {
                "username": "3******c",
                "rateTime": 1469281964000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              },
              {
                "username": "2******3",
                "rateTime": 1469271264000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              },
              {
                "username": "3******b",
                "rateTime": 1469261964000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              }
            ],
            "icon": "http://fuss10.elemecdn.com/0/05/097a2a59fd2a2292d08067e16380cjpeg.jpeg?imageView2/1/w/114/h/114",
            "image": "http://fuss10.elemecdn.com/0/05/097a2a59fd2a2292d08067e16380cjpeg.jpeg?imageView2/1/w/750/h/750"
          }
        ]
      },
      {
        "name": "特色粥品",
        "type": -1,
        "foods": [
          {
            "name": "皮蛋瘦肉粥",
            "price": 10,
            "oldPrice": "",
            "description": "咸粥",
            "sellCount": 229,
            "rating": 100,
            "ratings": [
              {
                "username": "3******c",
                "rateTime": 1469281964000,
                "rateType": 0,
                "text": "很喜欢的粥",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              },
              {
                "username": "2******3",
                "rateTime": 1469271264000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              },
              {
                "username": "3******b",
                "rateTime": 1469261964000,
                "rateType": 1,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              }
            ],
            "icon": "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/114/h/114",
            "image": "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/750/h/750"
          },
          {
            "name": "南瓜粥",
            "price": 9,
            "oldPrice": "",
            "description": "甜粥",
            "sellCount": 91,
            "rating": 100,
            "info": "",
            "ratings": [
              {
                "username": "3******c",
                "rateTime": 1469281964000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              },
              {
                "username": "2******3",
                "rateTime": 1469271264000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              },
              {
                "username": "3******b",
                "rateTime": 1469261964000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              }
            ],
            "icon": "http://fuss10.elemecdn.com/8/a6/453f65f16b1391942af11511b7a90jpeg.jpeg?imageView2/1/w/114/h/114",
            "image": "http://fuss10.elemecdn.com/8/a6/453f65f16b1391942af11511b7a90jpeg.jpeg?imageView2/1/w/750/h/750"
          },
          {
            "name": "红豆薏米美肤粥",
            "price": 12,
            "oldPrice": "",
            "description": "甜粥",
            "sellCount": 86,
            "rating": 100,
            "info": "",
            "ratings": [
              {
                "username": "3******c",
                "rateTime": 1469281964000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              },
              {
                "username": "2******3",
                "rateTime": 1469271264000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              },
              {
                "username": "3******b",
                "rateTime": 1469261964000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              }
            ],
            "icon": "http://fuss10.elemecdn.com/d/22/260bd78ee6ac6051136c5447fe307jpeg.jpeg?imageView2/1/w/114/h/114",
            "image": "http://fuss10.elemecdn.com/d/22/260bd78ee6ac6051136c5447fe307jpeg.jpeg?imageView2/1/w/750/h/750"
          },
          {
            "name": "红枣山药糙米粥",
            "price": 10,
            "oldPrice": "",
            "description": "",
            "sellCount": 81,
            "rating": 91,
            "info": "",
            "ratings": [
              {
                "username": "3******c",
                "rateTime": 1469281964000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              },
              {
                "username": "2******3",
                "rateTime": 1469271264000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              },
              {
                "username": "3******b",
                "rateTime": 1469261964000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              }
            ],
            "icon": "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/114/h/114",
            "image": "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/750/h/750"
          },
          {
            "name": "鲜蔬菌菇粥",
            "price": 11,
            "oldPrice": "",
            "description": "咸粥",
            "sellCount": 56,
            "rating": 100,
            "info": "",
            "ratings": [
              {
                "username": "3******c",
                "rateTime": 1469281964000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              },
              {
                "username": "2******3",
                "rateTime": 1469271264000,
                "rateType": 0,
                "text": ""
              },
              {
                "username": "3******b",
                "rateTime": 1469261964000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              }
            ],
            "icon": "http://fuss10.elemecdn.com/e/a3/5317c68dd618929b6ac05804e429ajpeg.jpeg?imageView2/1/w/114/h/114",
            "image": "http://fuss10.elemecdn.com/e/a3/5317c68dd618929b6ac05804e429ajpeg.jpeg?imageView2/1/w/750/h/750"
          },
          {
            "name": "田园蔬菜粥",
            "price": 10,
            "oldPrice": "",
            "description": "咸粥",
            "sellCount": 33,
            "rating": 100,
            "info": "",
            "ratings": [
              {
                "username": "3******c",
                "rateTime": 1469281964000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              },
              {
                "username": "2******3",
                "rateTime": 1469271264000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              },
              {
                "username": "3******b",
                "rateTime": 1469261964000,
                "rateType": 0,
                "text": "",
                "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
              }
            ],
            "icon": "http://fuss10.elemecdn.com/a/94/7371083792c19df00e546b29e344cjpeg.jpeg?imageView2/1/w/114/h/114",
            "image": "http://fuss10.elemecdn.com/a/94/7371083792c19df00e546b29e344cjpeg.jpeg?imageView2/1/w/750/h/750"
          }
        ]
      }
    ]
    setGoodsCategory(goodsCategoryData)
  }, [])

  useEffect(() => {
    let array = []
    goodsCategory.forEach(category => {
      category.foods.forEach(food => {
        if (food.count) {
          array.push(food)
        }
      })
    })
    setSelectFoods(array)
  }, [goodsCategory])

  useEffect(() => {
    setTimeout(() => {
      goodsPanelRef.current.refresh()
      goodsNavRef.current.refresh()
    }, 100);
  }, [goodsCategory])

  useEffect(() => {
    if (showPopupModel) {
      setShowTransition(true)
    } else {
      setShowTransition(false)
    }
  }, [showPopupModel])

  useEffect(() => {
    if (!selectFoods.length) {
      setShowPopupModel(false)
    }
  }, [selectFoods])

  const onNavItemClick = useCallback(item => {
    const ele = document.querySelector(`[data-category=${item.name}]`)
    goodsPanelRef.current.scrollToElement(ele, 300)

    const clickedNavItemIndex = goodsCategory.findIndex(category => {
      return category.name === item.name
    })

    setActiveNavIndex(clickedNavItemIndex)

    setIsJumpScroll(true)
  }, [selectFoods])

  const onAddFood = useCallback((selectedCategory, selectedFood, target) => {
    if (!selectedCategory || !selectedFood) return
    const immeredState = produce(draft => {

    const selectedCateIndex = goodsCategory.findIndex(category => {
      return category.name === selectedCategory.name
    })

    const selectedFoodIndex = goodsCategory[selectedCateIndex].foods.findIndex(food => {
      return food.name === selectedFood.name
    })
    if (draft[selectedCateIndex].foods[selectedFoodIndex].count) {
      draft[selectedCateIndex].foods[selectedFoodIndex].count += 1
    } else {
      draft[selectedCateIndex].foods[selectedFoodIndex].count = 1
    }
   })
   setGoodsCategory(immeredState)
   const immeredFood = produce(food, draft => {
    if (!draft) return
    if(draft.count > 0) {
      draft.count += 1
    } else {
      draft.count = 1
    }
   })
   setFood(immeredFood)
   
   // fix on food page, when click add to cart butn 
   if (target.target.classList[0] !== 'buy') {
    setShowBallFlying({selectedCategory, selectedFood, target})
   }
  }, [selectFoods, showFoodDetail, goodsCategory])

  const onSubtractFood = useCallback((selectedCategory, selectedFood) => {
    if (!selectedCategory || !selectedFood) return

    const immeredState = produce(draft => {

      const selectedCateIndex = goodsCategory.findIndex(category => {
        return category.name === selectedCategory.name
      })
  
      const selectedFoodIndex = goodsCategory[selectedCateIndex].foods.findIndex(food => {
        return food.name === selectedFood.name
      })
  
      if (draft[selectedCateIndex].foods[selectedFoodIndex].count > 1) {
        draft[selectedCateIndex].foods[selectedFoodIndex].count -= 1
      } else {
        draft[selectedCateIndex].foods[selectedFoodIndex].count = undefined
      }
      
     }) 
     setGoodsCategory(immeredState)

     const immeredFood = produce(food, draft => {
      if (!draft) return
      if (draft.count > 0) {
        draft.count -= 1
      } else {
        draft.count = null
      }
     })
     setFood(immeredFood)
  }, [selectFoods, showFoodDetail, goodsCategory]) 

  const adjustNavPos = useCallback((activeNavIndex, y) => {
    const viewportSize = document.querySelector('.goods-container').children[2].clientHeight
    const scrollerSize = document.querySelector('.goods-container').children[2].children[0].clientHeight
    const minTranslate = Math.min(0, viewportSize - scrollerSize)
    const middleTranslate = viewportSize / 2
    const items  = document.querySelector('.goods-container').children[2].children[0].children
    let size = 0
    for (let index = 0; index < items.length; index++) {
      if(items[index].classList.contains('active')) {
        size += items[index].clientHeight / 2
        break
      } else {
        size += items[index].clientHeight
      }
    }
    let translate = middleTranslate - size
    translate = Math.max(minTranslate, Math.min(0, translate))
    if (goodsNavRef.current.scroller)
      goodsNavRef.current.scroller.scrollTo(0, translate, 300)
}, []) 

  const onChangeNavItemIndex = useCallback(activeNavIndex => {
    setActiveNavIndex(activeNavIndex)
  }, []) 
  
  const onJumpToDetailPage = useCallback(food => {
    setFood(food)
    setShowFoodDetail(true)
  }, [activeNavIndex])

  const ClearCart = useCallback(() => {
    _clearCartList()
    setShowPopupModel(false)
  }, [selectFoods, showFoodDetail]) 

  const _clearCartList = useCallback(() => {
    const immeredState = produce(goodsCategory, draft => {
      draft.forEach(category => {
        category.foods.forEach(food => {
          if(food.count) {
            delete food.count
          }
        })
      })
     })
     setGoodsCategory(immeredState)
     const immeredFood = produce(food, draft => {

      if (draft && draft.count) {
        delete draft.count
      }
     })
     setFood(immeredFood)
  }, [selectFoods, showFoodDetail]) 

  return (
    <>
      <div className="goods-container">
        <GoodsPanel
          className='goods-panel'
          category={goodsCategory}
          myRef={goodsPanelRef}
          addFood={(category, food, target) => onAddFood(category, food, target)}
          subtractFood={(category, food) => onSubtractFood(category, food)}
          jumpToDetailPage={food => onJumpToDetailPage(food)}
          adjustNavPosition={(acitveNavIndex, y) => adjustNavPos(acitveNavIndex, y)}
          changeNavItemIndex={acitveNavIndex => onChangeNavItemIndex(acitveNavIndex)}
          isJumpScroll={isJumpScroll}
          onScrollEnd={() => setIsJumpScroll(false)}
        />
        <GoodsNav
          className='goods-nav'
          category={goodsCategory}
          navItemClick={navItem => onNavItemClick(navItem)}
          myRef={goodsNavRef} 
          ActiveNavIndex={activeNavIndex}
        />
      </div>
      {
        showPopupModel &&
        <ModelLayer 
          hide={
            () => { 
              setShowTransition(false)
              setTimeout(() => {
                setShowPopupModel(false)  
              }, 301);
            }}
          >
          <CSSTransition timeout={300} classNames="slide" in={showTransition}>
            <ShoppingCartList
              selectedFoods={selectFoods}
              goodsCategory={goodsCategory}
              addFood={(category, food, target) => onAddFood(category, food, target)}
              subtractFood={(category, food) => onSubtractFood(category, food)}
              ClearCart={() => ClearCart()}
            />
          </CSSTransition>
        </ModelLayer>
      }
      {
        (props.currentTabIndex === 0 || props.showShoppingCart) &&
        <ShopingCartSticky
          selectFoods={selectFoods}
          minPrice={seller.minPrice}
          deliveryPrice={seller.deliveryPrice}
          showBallFlying={showBallFlying}
          onClick={
            () =>  {
              if (!selectFoods.length) return
              if (showPopupModel) {
                setShowTransition(false)
                setTimeout(() => {
                  setShowPopupModel(false)    
                }, 301);
              } else {
                setShowPopupModel(true)
              }
            }
          }
        />
      }
      {
        showFoodDetail && food &&
        <FoodPortal 
          food={food}
          show={showFoodDetail}
          hideFoodPortal= {() => setShowFoodDetail(false)}
          category={goodsCategory}
          addFood={(category, food, target) => onAddFood(category, food, target)}
          subtractFood={(category, food) => onSubtractFood(category, food)}
        />
      }
    </>
  )
}

export default memo(Goods)